<template>
	<view class="cu-text-main cu-bg-main">
		<!-- background -->
		<block v-if="showBg">
			<page-bg :opacity="getOpacity" :height="bgOptions.height" :borderRadius="bgOptions.borderRadius"
				:backgroundImageType="bgOptions.backgroundImageType" :backgroundImageUrl="getBgImageUrl"
				:linearGradient="bgOptions.linearGradient"></page-bg>
		</block>

		<!-- head nav bg -->
		<block v-if="showHeadNabBg">
			<page-bg :opacity="headNavBgOptions.opacity" :height="headNavBgOptions.height" 
				zIndex="2"
				:borderRadius="headNavBgOptions.borderRadius"
				:backgroundImageType="headNavBgOptions.backgroundImageType"
				:backgroundImageUrl="headNavBgOptions.backgroundImageUrl"
				:linearGradient="headNavBgOptions.linearGradient"></page-bg>
		</block>

		<!-- head nav -->
		<view class="cu-w-100 cu-position-fixed" :style="{
			zIndex:'3',
			color:headColor
		}">
			<!-- statusBar -->
			<block v-if="showStatusBar">
				<status-bar>
					<view v-if="showStatusBar" class="cu-w-100 cu-position-relative" :style="{
							height: '100%',
							backgroundColor:statusBarbackgroundColor
						}">
						<slot name="statusbar"></slot>
					</view>
				</status-bar>
			</block>
			<!-- nav-bar -->
			<block v-if="showNavBar && navBarOptions">
				<uni-nav-bar :title="navBarOptions.title ? navBarOptions.title : ''"
					:leftText="navBarOptions.leftText ? navBarOptions.leftText : ''"
					:rightText="navBarOptions.rightText ? navBarOptions.rightText : ''"
					:leftIcon="navBarOptions.leftIcon ? navBarOptions.leftIcon : ''"
					:rightIcon="navBarOptions.rightIcon ? navBarOptions.rightIcon : ''"
					:color="navBarOptions.color ? navBarOptions.color : '#3e3e7e'"
					:backgroundColor="navBarOptions.backgroundColor ? navBarOptions.backgroundColor : '#f8f8f8'"
					:fixed="navBarOptions.fixed === true ? true : false"
					:statusBar="navBarOptions.statusBar === true ? true : false"
					:shadow="navBarOptions.shadow === true ? true : false"
					:border="navBarOptions.border === true ? true : false"
					:height="navBarOptions.height ? navBarOptions.height : 44"
					:dark="navBarOptions.dark === true ? true : false"
					:leftWidth="navBarOptions.leftWidth ? navBarOptions.leftWidth : '120rpx'"
					:rightWidth="navBarOptions.rightWidth ? navBarOptions.rightWidth : '120rpx'"
					:stat="navBarOptions.stat ? navBarOptions.stat : '120rpx'"
					@clickLeft="event('clickNavBarLeft',navBarOptions.data ? navBarOptions.data : undefined)"
					@clickRight="event('clickNavBarRight',navBarOptions.data ? navBarOptions.data : undefined)"
					@clickTitle="event('clickNavBarTitle',navBarOptions.data ? navBarOptions.data : undefined)">
					<block v-if="navBarCenter">
						<template #default>
							<slot name="navBarCenter"></slot>
						</template>
					</block>
					<block v-else>
						<block v-if="navBarOptions && navBarOptions.title">
							<view class="cu-w-100 cu-row cu-j-center" :style="{
								height: navBarOptions.height ? navBarOptions.height : 44 + 'px',
								lineHeight: navBarOptions.height ? navBarOptions.height : 44 + 'px',
								backgroundColor: navBarOptions.backgroundColor ? navBarOptions.backgroundColor : '#f8f8f8',
							}">{{navBarOptions.title}}
								<slot name="navBarCenter"></slot>
							</view>
						</block>
					</block>
					<block v-if="navBarLeft">
						<template #left>
							<slot name="navBarLeft"></slot>
						</template>
					</block>
					<block v-if="navBarRight">
						<template #right>
							<slot name="navBarRight"></slot>
						</template>
					</block>
				</uni-nav-bar>
			</block>
			
			<block v-if="showCumtomHead">
				<slot name="cumtomHead"></slot>
			</block>
		</view>
		<view class="cu-w-100 cu-position-relative" :style="{
			zIndex:'1',
			top:getContentTop
		}">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	import PageBg from "@/components/common/cu-page-base/page-bg";
	import StatusBar from "@/components/common/cu-page-base/status-bar";
	export default {
		name: "cu-page-base",
		emits: ['clickNavBarLeft','clickNavBarRight','clickNavBarTitle'],
		props: {
			// 是否显示背景
			showBg: {
				type: Boolean,
				default: true
			},
			// 背景默认配置
			bgOptions: {
				type: Object,
				default: function(e){
					return {
							/* 不透明度 */
							opacity: undefined,
							/* 高度 */
							height: "100vh",
							/* 圆角 */
							borderRadius: undefined,
							/* 背景类型 
							image 	图片 
							非image 渐变色 （默认）*/
							backgroundImageType: "image",
							/* 图片base64 */
							backgroundImageUrl: undefined,
							/* 渐变色 */
							linearGradient: "linear-gradient(to top,rgba(64, 64, 111,0.65),rgba(64, 64, 111,0.25))"
						}
				}
			},
			// 是否显示头部背景
			showHeadNabBg: {
				type: Boolean,
				default: false
			},
			// 头部nav背景默认配置
			headNavBgOptions: {
				type: Object,
				default: function(e){
					return {
						/* 不透明度 */
						opacity: '1',
						/* 高度 */
						height: "500rpx",
						/* 圆角 */
						borderRadius: "0 0 40rpx 40rpx",
						/* 背景类型 
							image 	图片 
							非image 渐变色 （默认）*/
						backgroundImageType: "color",
						/* 图片base64 */
						backgroundImageUrl: undefined,
						/* 渐变色 */
						linearGradient: "linear-gradient(to bottom,rgba(64, 64, 111,1),rgba(143, 147, 222,1))"
					}
				},
			},
			// 是否显示头部
			showHead: {
				type: Boolean,
				default: true
			},
			// 是否设置默认头部高度
			showStatusBar: {
				type: Boolean,
				default: true
			},
			// 默认头部高度背景颜色
			statusBarbackgroundColor: {
				type: String,
				default: '#f8f8f8'
			},
			// 是否显示NavBar
			showNavBar: {
				type: Boolean,
				default: true
			},
			// head nav配置信息
			navBarOptions: {
				type: Object,
				default: function(e){
					return {}
				}
			},
			// head 文字颜色
			headColor: {
				type: String,
				default: undefined
			},
			// 是否使用navBarCenter插槽
			navBarCenter: {
				type: Boolean,
				default: false
			},
			// 是否使用navBarLeft插槽
			navBarLeft: {
				type: Boolean,
				default: false
			},
			// 是否使用navBarRight插槽
			navBarRight: {
				type: Boolean,
				default: false
			},
			// 内容距离顶部高度
			contentTop: {
				type: String,
				default: undefined
			},
			// 是否显示自定义head
			showCumtomHead: {
				type: Boolean,
				default: false
			},
		},
		components: {
			PageBg,
			StatusBar
		},
		computed: {
			getBgImageUrl() {
				return this.bgOptions.backgroundImageType === "image" && this.bgOptions.backgroundImageUrl === undefined ?
					this.$store.state.commonStore.bgOptions.url : this
					.bgOptions.backgroundImageUrl
			},
			getOpacity() {
				return this.bgOptions.opacity === undefined ? this.$store.state.commonStore.bgOptions.opacity : this
					.bgOptions.opacity
			},
			getContentTop(){
				let height = 0;
				if(this.contentTop !== undefined && this.contentTop !== ""){
					return this.contentTop
				}
				if(this.showStatusBar === true){
					let systemInfoSync = uni.getStorageSync('cu-systemInfoSync');
					if (systemInfoSync) {
						height = height + systemInfoSync.statusBarHeight
					}
				}
				if(this.showNavBar === true){
					if(this.navBarOptions && this.navBarOptions.height){
						height = height + this.navBarOptions.height
					}
					else {
						height = height + 44
					}
				}
				return height + 'px'
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			event(type, data) {
				// navBar 点击事件
				if (type.indexOf("clickNavBar") === 0) {
					console.log(type)
					this.$emit(type, data)
				}
			}
		},
	}
</script>

<style lang="scss">

</style>